<template>
  <div class="ProjectBox" style="line-height:normal">
    <div class="ProjTreeZone" style="line-height:normal">
      <el-tree class="filter_treeCSS"
               ref="projTree"
               id="projTree"
               :data="dataList"
               empty-text='空'
               :props="defaultProps"
               node-key="id"
               :current-node-key='nodeKey'
               :expand-on-click-node="false"
               check-strictly default-expand-all highlight-current
               @node-click="handleNodeClick"
               @check-change="handleCheckChange">

        <template #default="{ node, data }">
              <span>
                <span
                ><i
                icon="Search"
                  style="margin-right: 0px"
                  v-if="data.id == 49524947 ? true : false"
                ></i>
                  <i
                    class="el-icon-folder-opened"
                    style="margin-right: 34px"
                    v-else-if="data.children != null ? true : false"
                  ></i>
                  <i
                    class="el-icon-folder"
                    style="margin-right: 0px"
                    v-else
                  ></i
                  ></span>
                <!-- 正常情况 -->
                <span v-if="data.id != operationVis">
                  <span>
                    {{ node.label + "_" + data.id }}
                  </span>
                  <span style="margin-left: 20px">
                    <el-button
          
                      icon="Edit"
                      @click="editFile(data)"
                    >
                      <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button
                    icon="Delete"
           
                      @click="remove(node, data)"
                    >
                      <i class="el-icon-delete" style="color: red"></i>
                    </el-button>
                   <el-button :icon="Edit" @click="handleNew(node, data)">
                    <i class="el-icon-delete" style="color: red"></i>
                  </el-button>
              
                  </span>
                </span>
                <!-- 编辑情况 -->
                <!--  -->
                <span v-else>
                  <el-input
                    style="width: 120px"
                    size="mini"
                    ref="inputVal"
                    v-model='inputData'
                    :value="data.label"
                    @focus="focus($event)"
                    @input="(a) => inputKeyWord(a, data)"
                    clearable autocomplete="off"
                  >
                  </el-input>

                  <span
                    style="margin-left: 20px"
                    v-if="data.id != 49524947 ? true : false"
                  >
                    <el-button
                  
                      icon="Check"
                      @click="() => sureChange(data)"
                    >
                      <i
                        class="el-icon-circle-check"
                        style="color: rgb(19, 206, 102)"
                      ></i>
                    </el-button>
                    <el-button
                      size="mini"
                      @click="() => cancelChange(node, data)"
                    >
                      <i class="el-icon-circle-close" style="color: gray"></i>
                    </el-button>
                  </span>
                </span>
              </span>
        </template>
      </el-tree
      >
    </div>
  </div>
</template>
<script>
var DefaultProjList = [ {id: 49524947, text: 'root', children: 
[ {id: 11, text: 'xiaofei'},{id: 12, text: 'pizi'}]}, 
{ id: 49524948, text: 'longx' ,children: [ ]}]

// 编辑按钮
var editFile = function (data) {
  console.log('gggggggggggggg')
  this.operationVis = data.id
}

var remove = function (node, data) {
  console.log('heiheihei')
  this.operationVis = data.id
}

var focus = function (event) {
  console.log('hahaha')
}

var inputKeyWord = function (a, data) {
  console.log(a)
  this.$forceUpdate()
  data.label = a
}

var cancelChange = function (node, data) {
  console.log(data)
  this.operationVis = false
}
var sureChange = function (data) {
  console.log('sureEdit')
  console.log(data)
  data.text = data.label
  this.operationVis = false
}

var handleNew = function (node, data) {
  // var t = 'new:' + node.label
  console.log('add new child node:\n', data)
  var nodeID = ''// utilfuncs.generateUUID();
  const newChild = {id: nodeID, text: 'unamed', children: [] }
  if (data.children == null) {
    data.children = []
  }
  data.children.push(newChild)
  this.post2Save(node, data)
}

var handleUpdate = function (node, data) {
  let test = document.getElementById('reNameMenuID')
  let tempbutton = document.createElement('input')
  tempbutton.innerHTML = `测试按钮11`
  test.parentNode.parentNode.insertAdjacentElement('beforeend', tempbutton)
  var t = 'update:' + node.label
  data.text = data.text + '_rename'
  console.log(t)
  this.post2Save(node, data)
}

var handleDelete = function (node, data) {
  var t = 'delete:' + node.label + '_' + node.level
  console.log(t)
  deleteLeafFromTree(node, data, this.dataList)
  this.post2Save(node, data)
}

var post2Save = function (node, data) {
  var url = 'api/project/save'
  var postObj = { 'uuid': '10001' }
  postObj['data'] = this.dataList[0]
  postObj['sname'] = 'long'
  this.post2SaveProject(url, postObj)
}

var post2SaveProject = function (url, obj) {
  // axios.post(url, obj).then(res => {
  //   console.log(res.data)
  // }).catch(function (error) {
  //   console.log(error)
  // })
}

var deleteLeafFromTree = function (node, data, list) {
  var len = list.length
  for (var i = 0; i < len; i++) {
    var tmp = list[i]
    if (tmp === data) {
      var headArr = list.splice(i, 1)
      console.log(headArr)
      return true
    } else {
      var flag = deleteLeafFromTree(node, data, tmp.children)
      if (flag) {
        return flag
      }
    }
  }
  return false
}
export default {
  components: {

  },
  name: 'ProjectBox',
  props: {
  },
  data () {
    return {
      nodeKey: '49524947',
      inputData: '',
      operationVis: 0,
      dataList: DefaultProjList,
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值--选择一个对象作为子节点使用
        label: 'text' // 指定节点标签为节点对象的某个属性值--选择一个值作为label显示
      }

    }
  },
  mounted () {
    this.$nextTick(function () {
      this.$nextTick(() => {
        // myTree 数组件的ref  默认让第一项高亮
        // data是树组件对应的数据
        // 通过data中的第一项的id找到对应的节点，然后把这个节点设置为高亮
        this.$refs['projTree'].setCurrentKey(this.nodeKey)
      })
    })
  },
  watch: {
    data: {
      immediate: true,
      handel (val) {

      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.$refs['projTree'].setCurrentKey(this.nodeKey)
      //  console.log(this.$refs.projTree.getCurrentKey())
    })
  },
  computed: {
  },
  methods: {
    handleNew,
    handleUpdate,
    handleDelete,
    post2Save,
    post2SaveProject,
    editFile,
    remove,
    focus,
    inputKeyWord,
    cancelChange,
    sureChange,
    setDataList (v) {
      this.dataList = v
    },
    post2GetProject (url, obj) {
      // axios.post(url, obj).then(res => {
      //   this.setDataList(res.data)
      //   console.log(res.data)
      // }).catch(function (error) {
      //   console.log(error)
      // })
    },
    openProj () {
      var url = 'api/project/get'
      var data = { 'uuid': '10001' }
      this.post2GetProject(url, data)
    },

    getFileCallBack (data) {
      console.log(data)
      if (data != null) {
        window.mainctl.clearData()
        // window.mainctl.initGraphObj(data, true);
      } else {
        alert('get graph file error!!!')
      }
    },

    post2GetFileData (url, obj) {
      // axios.post(url, obj).then(res => {
      //   this.getFileCallBack(res.data)
      //   console.log(res.data)
      // }).catch(function (error) {
      //   console.log(error)
      // })
    },

    getFile (uuid) {
      var url = 'api/graph/getfiledata'
      var data = { 'uuid': uuid }
      this.post2GetFileData(url, data)
    },
    handleNodeClick (data1, data2, data3) {
      console.log('handleNodeClick')
      var selNodeKey = this.$refs.projTree.getCurrentKey()
      this.getFile(selNodeKey)
      console.log(selNodeKey)
    },

    handleCheckChange (data, checked, indeterminate) {
      console.log(this.$refs.projTree.getCheckedNodes(true, false), 'node')
      console.log(this.$refs.projTree.getCheckedKeys(false), 'key')
      console.log(this.$refs.projTree.getHalfCheckedNodes())
      console.log(this.$refs.projTree.getHalfCheckedKeys())
    }
  }
}

</script>

<style scoped>

.el-tree-node.is-current>.el-tree-node__content {
  background-color: red !important;
}

/* 左侧样式 */
.ProjectBoxZone {
  position: relative;
  width: 295px;
  height: 100px;
  top: 0px;
  /* 距离上面50像素 */
  left: 0px;
  bottom: 0px;
  /* 当内容过多时y轴出现滚动条 */
  background-color: #bf3593;
}

.ProjTreeZone {
  position: relative;
  width: 295px;
  top: 10px;
  /* height: 500px; */
  /* 距离上面50像素 */
  left: 0px;
  bottom: 0px;
  /* overflow-y: auto; */
  /* 当内容过多时y轴出现滚动条 */
  background-color: #000064fd;
}
</style>
